<template>
  <div class="container">
    <div class="content def">
      <div class="rotation" @mouseenter="mouseenter" @mouseleave="mouseleave">
          <img @click="goDetail(img)" v-for="(img,index) in imgs" v-show="index === mark"
            :key="index" v-lazy="img.goods_url" />
          <div class="prev" @click="prev"><span>&lt;</span></div>
          <div class="next" @click="next"><span>&gt;</span></div>
          <div class="bullet">
            <span v-for="(item,i) in imgs.length" @click="change(i)"
                :key="i" :class="{'active':i === mark}"></span>
          </div>
      </div>
      <div class="rotationRight">
        <div v-for="(pic,index) in pics" :key="index">
        <img @click="goDetail(pic)" v-lazy="pic.goods_url" alt="图片加载失败"> 
        <div @click="goType(pic.goods_type)" class="type">{{pic.goods_type}}</div>
        <div class="detail">
            <span @click="addCar(pic.goods_id)" style="cursor:pointer;">加入购物车</span>
        </div>
        </div>
      </div>
      <div @click="exchange">
          <i class="exchange el-icon-refresh"></i>
      </div>
    </div>
  </div>
</template>

<script>
import {reqRandomGoods,reqAddCar} from '../../api'
export default {
    name:'Rotation',
    data() {
        return {
            mark:0, //显示的图片的索引
            pics:[],
            timer:null,
            imgs:[]
        }
    },
    methods:{
        prev(){ //上一张轮播图
            this.mark--
            if (this.mark === -1) {
                this.mark = 2;
                return
            }
        },
        next(){ //下一站轮播图
            this.mark++
            if(this.mark === 3){
                this.mark = 0;
                return
            }
        },
        change(i){ //轮播图底部圆点
            this.mark = i
        },
        async exchange(){ //换一换
            let middle  = await reqRandomGoods();
            this.pics.splice(0),this.imgs.splice(0)
            middle.forEach((item,index) => {
                if(index < 4){
                this.pics.push(item)   //右边
                }else{
                this.imgs.push(item) //左边
                }
            })
        },
        mouseenter(){
            clearInterval(this.timer)
        },
        mouseleave(){
            this.timer = setInterval(()=>{
                this.next()
            },3500)
        },
        addCar(id){ //添加到购物车
            if (JSON.parse(localStorage.getItem('key') === null)) {
                this.$message.error('登录令牌不存在！')
                this.$router.push('/user/info')
            }else{
                let token = JSON.parse(localStorage.getItem('key')).token
                if(reqAddCar(id,token).exist === false) {
                    this.$message.error('登录令牌失效，请重新登录！')
                    this.$router.push('/user/info')
                }else{
                    this.$message.success('添加到购物车成功,可前往购物车查看！')
                }
            }
        },
        goDetail(item){
            const array = JSON.stringify(item)
            this.$router.push({path:'/detail',query:{value:array}})
        },
        goType(type){
            this.$router.push({path:'/type',query:{type}})
        }
    },
    async mounted() {
        let middle  = await reqRandomGoods();
        middle.forEach((item,index) => {
            if(index < 4){
              this.pics.push(item)   //右边
            }else{
              this.imgs.push(item) //左边
            }
        });
        this.timer = setInterval(()=>{
            this.next()
        },3500)
    },
}
</script>

<style scoped>
    .def{
        position:relative;
        margin-top:30px;
        margin-bottom:30px;
    }
    .exchange{ 
        position:absolute;
        top: 0;
        right: 30px;
        cursor: pointer;
        font-size: 1.6rem;
        transform:rotate(-270deg);
        transition:all 800ms ease;
    }
    .exchange:hover{
        transform:rotate(270deg);
        transition:all 800ms ease;
    }
    .rotationRight{
        position: absolute;
        top: 0;
        right: 0;
        width: 608px;
        height: 400px;
        border-radius: 8px;
    }
    .rotationRight > div{
        float: left;
        width:248px;height:196px;
        margin-left: 8px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }
    .rotationRight > div:hover .detail{
        transform: translateY(0);
        /* 0.4s完成transform移动效果*/
        transition: all 0.4s;
    }
    .detail{
        position: absolute;
        background: #C69C6C;
        width: 100%;
        bottom: 0;
        text-align: center;
        color: white;
        padding: 12px;
        font-weight: 100;
        opacity: 0.9;
        transform: translateY(50px);
        /* 0.4s完成transform移动效果*/
        transition: all 0.4s;
    }
    .type{
        position: absolute;
        cursor: pointer;
        top: 10px;
        right: 10px;
        background: #C69C6C;
        border-radius: 4px;
        color: rgba(255, 255, 255, 0.8);
        padding: 2px 5px;
        font-size: 12px;
        user-select: none;
    }
    .rotationRight > div:nth-of-type(n+3){
        /* 下面一行 */
        margin-top: 8px;
    }
    .rotationRight > div:nth-of-type(2n+1){
        margin-left: 20px;
    }
    .active{ 
        background-color: #C69C6C !important;
    }
    .rotation span:hover{
        background-color: #393D45;
    }
    .rotation{
        border-radius: 8px;
        width:400px;
        height:400px;
        overflow:hidden;
        position: relative;
    }
    .bullet{
        position:absolute;
        color: white;
        bottom: 20px;
        left: 50%;
        margin-left: -42px;
    }
    .bullet span{
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        margin-left: 15px;
        cursor: pointer;
    }
    .prev{
        position:absolute;
        color:white;
        top: 187.5px;
    }
    .next{
        position:absolute;
        right: 0;
        color:white;
        top: 187.5px;
    }
    .prev span,.next span{
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: rgba(0,0,0,.1);
        font-size: 20px;
        color: #ffffff;
        top: 50%;
        margin-top: -25px;
        cursor: pointer;
        font-family: "宋体";
        user-select: none;
    }
    img{
        max-width: 100%;
        width: 100%;
        float: left;
        user-select: none;
    }
</style>